﻿<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>捞海底商城后台管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/xadmin.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script src="lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/xadmin.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

</head>

<body>
    <!-- 顶部开始 -->
    <script type="text/javascript" src="./js/header.js"></script>
    <!-- 顶部结束 -->
    <!-- 中部开始 -->
    <div class="wrapper">
        <!-- 左侧菜单开始 -->
        <div class="left-nav">
            <div id="side-nav">
                <ul id="nav">
                    <li class="list">
                        <a href="index.html">
                            <i class="iconfont">&#xe761;</i>
                            信息汇总
                            <i class="iconfont nav_right">&#xe697;</i>
                        </a>
                    </li>
                    <li class="list">
                        <a href="javascript:;">
                            <i class="iconfont">&#xe70b;</i>
                            会员管理
                            <i class="iconfont nav_right">&#xe697;</i>
                        </a>
                        <ul class="sub-menu">
                            <li>
                                <a href="member-list.html">
                                    <i class="iconfont">&#xe6a7;</i>
                                    会员列表
                                </a>
                            </li>
                            <li>
                                <a href="member-del.html">
                                    <i class="iconfont">&#xe6a7;</i>
                                    会员删除
                                </a>
                            </li>
                            <li>
                                <a href="member-view.html">
                                    <i class="iconfont">&#xe6a7;</i>
                                    浏览记录
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="list">
                        <a href="javascript:;">
                            <i class="iconfont">&#xe6a3;</i>
                            分类管理
                            <i class="iconfont nav_right">&#xe697;</i>
                        </a>
                        <ul class="sub-menu">
                            <li>
                                <a href="category.html">
                                    <i class="iconfont">&#xe6a7;</i>
                                    分类列表
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="list">
                        <a href="javascript:;">
                            <i class="iconfont">&#xe6a3;</i>
                            订单管理
                            <i class="iconfont nav_right">&#xe697;</i>
                        </a>
                        <ul class="sub-menu">
                            <li>
                                <a href="order.html">
                                    <i class="iconfont">&#xe6a7;</i>
                                    订单列表
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="list">
                        <a href="javascript:;">
                            <i class="iconfont">&#xe6a3;</i>
                            轮播管理
                            <i class="iconfont nav_right">&#xe697;</i>
                        </a>
                        <ul class="sub-menu" style="display:none">
                            <li>
                                <a href="banner-list.html">
                                    <i class="iconfont">&#xe6a7;</i>
                                    轮播列表
                                </a>
                            </li>
                        </ul>
                    </li>

                    <li class="list">
                        <a href="javascript:;">
                            <i class="iconfont">&#xe6a3;</i>
                            综合统计
                            <i class="iconfont nav_right">&#xe697;</i>
                        </a>
                        <ul class="sub-menu opened">
                            <li>
                                <a href="echarts1.html">
                                    <i class="iconfont">&#xe6a7;</i>
                                    销售额统计
                                </a>
                            </li>
                            <li class="current">
                                <a href="echarts2.html">
                                    <i class="iconfont">&#xe6a7;</i>
                                    销量排行
                                </a>
                            </li>
                            <li>
                                <a href="echarts4.html">
                                    <i class="iconfont">&#xe6a7;</i>
                                    售出占比
                                </a>
                            </li>
                            <li>
                                <a href="echarts5.html">
                                    <i class="iconfont">&#xe6a7;</i>
                                    股市走向
                                </a>
                            </li>
                        </ul>
                    </li>
                    <!-- <li class="list">
                        <a href="setting.html">
                            <i class="iconfont">&#xe6a3;</i>
                            系统设置
                            <i class="iconfont nav_right">&#xe697;</i>
                        </a>
                    </li> -->
                </ul>
            </div>
        </div>
        <!-- 左侧菜单结束 -->
        <!-- 右侧主体开始 -->
        <div class="page-content">
            <div class="content">
                <!-- 右侧内容框架，更改从这里开始 -->
                <blockquote class="layui-elem-quote">
                    捞海底商城数据统计
                </blockquote>
                <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                <div id="main" style="width: 100%;height:400px;"></div>

                <!-- 右侧内容框架，更改从这里结束 -->
            </div>
        </div>
        <!-- 右侧主体结束 -->
    </div>
    <!-- 中部结束 -->
    <!-- 底部开始 -->
    <div class="footer">
        <div class="copyright">Copyright ©2022 海底捞商城 All Rights Reserved. 本后台系统由凌晨三点海底捞提供技术支持</div>
    </div>
    <!-- 底部结束 -->
    <!-- 背景切换开始 -->
    <div class="bg-changer">
        <div class="swiper-container changer-list">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img class="item" src="images/a.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/b.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/c.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/d.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/e.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/f.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/g.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/h.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/i.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/j.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="images/k.jpg" alt=""></div>
                <div class="swiper-slide"><span class="reset">初始化</span></div>
            </div>
        </div>
        <div class="bg-out"></div>
        <div id="changer-set"><i class="iconfont">&#xe696;</i></div>
    </div>
    <!-- 背景切换结束 -->

    <script src="http://cdn.bootcss.com/echarts/3.3.2/echarts.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/echarts-for-x-admin.js"></script>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        function getxData(data) {
            var xData = [];
            for (var i = 0; i < data.length; i++) {
                if (data[i].name.length > 10) {
                    xData.push(data[i].name.substr(0, 10) + '...');
                } else {
                    xData.push(data[i].name);
                }
            }
            return xData;
        }
        function getyData(data) {
            var yData = [];
            for (var i = 0; i < data.length; i++) {
                yData.push(data[i].sales);
            }
            return yData;
        }


        let data;
        axios({
            method: 'get',
            url: 'http://1.116.147.57:8080/statistics/sales',

        }).then((result) => {
            data = result.data.data
            var myChart = echarts.init(document.getElementById('main'), 'echarts-for-x-admin');

            // 指定图表的配置项和数据
            var labelRight = {
                normal: {
                    position: 'right'
                }
            };
            option = {
                title: {
                    text: '商品销量排行榜',
                    left: 'center',
                    top: 20,
                    textStyle: {
                        color: '#ccc'
                    }
                    // subtext: '商品销量排行榜',
                    // sublink: 'http://e.weibo.com/1341556070/AjwF2AgQm'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    top: 80,
                    bottom: 30
                },
                xAxis: {
                    type: 'value',
                    position: 'bottom',
                    splitLine: { lineStyle: { type: 'dashed' } },
                },
                yAxis: {
                    type: 'category',
                    axisLine: { show: true },
                    axisLabel: { show: false },
                    axisTick: { show: false },
                    splitLine: { show: false },
                    data: getxData(data)


                },
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                formatter: '{b}'
                            }
                        },
                        data: getyData(data)
                    }
                ]
            };



            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }).catch((err) => {
            console.log(err);
        });


    </script>


</body>

</html>